import {
  Form,
  Input,
  Button,
  Table,
  Popconfirm,
  Space,
  Select,
  Pagination,
  message,
} from "antd";
import { useEffect, useState } from "react";
import "./Vehicle_information_management.scss";
import http from "../../utils/http";
import getLocalTime from "../../utils/getLocalTime";
import store from "../../store/index";
import { observer } from "mobx-react";
const VehicleInformationShow = ({ setState }) => {
  let [dataList, setData] = useState([{}, {}]);
  const [license, setLicense] = useState(); //查询车牌号
  const [phone, setPhone] = useState(""); //查询手机号
  const [carType, setType] = useState(""); //查询车辆类型
  useEffect(() => {
    http({
      url: "/car/carInformationList",
    }).then((res) => {
      setData(trans(res.data.data));
      store.tangxiaoyun.count = res.data.count;
      store.tangxiaoyun.current = 1;
    });
  }, []);
  //
  function trans(v) {
    for (let i = 0; i < v.length; i++) {
      v[i].cinfStart = getLocalTime(v[i].cinfStart);
      v[i].cinfEnd = getLocalTime(v[i].cinfEnd);
      if (v[i].cinfClass == 0) {
        v[i].cinfClass = "临时车";
      } else if (v[i].cinfClass == 1) {
        v[i].cinfClass = "包月车";
      } else {
        v[i].cinfClass = "园区车";
      }
    }
    return v;
  }
  const [form] = Form.useForm();
  //查询
  const search = () => {
    let value = form.getFieldsValue(true);
    http({
      url: "/car/carInformationList",
      params: {
        cinfClass: value.type ? value.type : "",
        ownerPhone: value.phone ? value.phone : "",
        cinfMark: value.license ? value.license : "",
      },
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        setData(trans(res.data.data));
        store.tangxiaoyun.count = res.data.count;
        store.tangxiaoyun.current = 1;
      } else {
        message.error({
          content: "请输入正确的查询数据",
          className: "custom-class",
          style: {
            marginTop: "20vh",
          },
        });
      }
    });
  };
  // 单独删除
  const del = (v) => {
    let arr = new Array();
    arr.push(v.cinfId);
    http({
      url: "/car/deleteCarInformation",
      method: "post",
      data: arr,
    }).then((res) => {
      // console.log(res);
      if (res.code == 200) {
        message.success({
          content: "删除成功",
          className: "custom-class",
          style: {
            marginTop: "20vh",
          },
        });
        http({
          url: "/car/carInformationList",
          method: "get",
          params: {
            current: store.tangxiaoyun.current,
          },
        }).then((res) => {
          // console.log(res);
          setData(trans(res.data.data));
        });
      }
    });
  };

  const add = () => {
    setState(2); //新增页面
    // http({
    //   url: "/car/addCarInformation",
    //   method: "post",
    //   params: record.cinfId,
    // }).then((res) => {
    //   console.log(res);
    // });
  };
  const { Option } = Select;
  //重置
  const resize = () => {
    form.resetFields();
    http({
      url: "/car/carInformationList",
    }).then((res) => {
      if (res.code == 200) {
        setData(trans(res.data.data));
        store.tangxiaoyun.current = 1;
        store.tangxiaoyun.count = res.data.count;
      }
    });
  };
  //跳转详情页面
  const openEditBox = (record) => {
    setState(3);
    // 当前数据id传到store
    store.tangxiaoyun.car_id = record.cinfId;
    store.tangxiaoyun.car_type = record.cinfClass;
  };
  function cancel(e) {}

  function handleChange(value) {}

  // 分页
  const pageChange = (current, size) => {
    store.tangxiaoyun.current = current;
    console.log(current, size);
    let value = form.getFieldsValue(true);
    http({
      url: "/car/carInformationList",
      params: {
        current: current,
        size: size,
        cinfClass: value.type ? value.type : "",
        ownerPhone: value.phone ? value.phone : "",
        cinfMark: value.license ? value.license : "",
      },
    }).then((res) => {
      if (res.code == 200) {
        console.log(res.data.data);
        setData(trans(res.data.data));
      }
    });
  };
  // 表头
  const columns = [
    {
      title: "车主姓名",
      dataIndex: "cinfName",
      key: "cinfName",
    },
    {
      title: "联系方式",
      dataIndex: "cinfPhone",
      key: "cinfPhone",
    },
    {
      title: "车牌号码",
      dataIndex: "cinfMark",
      key: "cinfMark",
    },
    {
      title: "车辆型号",
      dataIndex: "cinfType",
      key: "cinfType",
    },
    {
      title: "车辆类型",
      dataIndex: "cinfClass",
      key: "cinfClass",
    },
    {
      title: "开始时间",
      dataIndex: "cinfStart",
      key: "cinfStart",
    },
    {
      title: "结束时间",
      dataIndex: "cinfEnd",
      key: "cinfEnd",
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (text, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              openEditBox(record);
            }}
          >
            详情
          </a>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => {
              del(record);
            }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record) => ({
      name: record.name,
    }),
  };

  return (
    <div className="roleContent">
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        className="title"
      >
        <Form.Item name="username">
          <div className="kuai">
            <span></span>
            <span>车辆信息管理</span>
          </div>
        </Form.Item>
        <Form.Item className="btn">
          <div>
            <Button className="cha" type="primary" onClick={add}>
              新增
            </Button>
            <Button className="resize" onClick={resize} type="primary">
              批量删除
            </Button>
          </div>
        </Form.Item>
      </Form>
      <div className="biao">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          className="Role"
        >
          <Form.Item name="license" label="车牌号码">
            <Input placeholder="请输入车牌号码" allowClear="true" />
          </Form.Item>
          <Form.Item name="phone" label="联系方式">
            <Input placeholder="请输入联系方式" allowClear="true" />
          </Form.Item>
          <Form.Item name="type" label="车辆类型">
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="0">临时车</Option>
              <Option value="1">包月车</Option>
              <Option value="2">园区车</Option>
            </Select>
          </Form.Item>
          <Form.Item className="btn">
            <div>
              <Button className="cha" type="primary" onClick={search}>
                查询
              </Button>
              <Button className="resize" onClick={resize} type="primary">
                重置
              </Button>
            </div>
          </Form.Item>
        </Form>
        <Table
          className="table1"
          rowSelection={{
            ...rowSelection,
          }}
          columns={columns}
          dataSource={dataList}
          pagination={false}
        />
        <Pagination
          className="page"
          defaultCurrent={1}
          current={store.tangxiaoyun.current}
          total={store.tangxiaoyun.count}
          onChange={pageChange}
        />
      </div>
    </div>
  );
};
export default observer(VehicleInformationShow);
